<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script src="static/plotly-2.35.2.min.js"></script>
</head>
<body>

<select name="" id="" class='choose_article'>
<option>All</option>
<option>nature2022</option>
<option>nature2020</option>
</select>

<select name="" id="" class='choose_data'>
<option>cell_type</option>
<option>region</option>
</select>
<div id="plotly-chart" style='width:700px;float:left'></div>

<select name="" id="" class='choose_data1'>
<option>MYBPC3</option>
<option>PCDH7</option>
<option>FHL2</option>
</select>
<div id="plotly-chart1" style='width:700px; float:right'></div>
<img src="http://127.0.0.1:8000/static/pic.png" alt="">







<script>
const dataSelector3 = document.querySelector('.choose_article')
    function render_data() {
        const plot_container = document.getElementById("plotly-chart");
        const plot_container1 = document.getElementById("plotly-chart1");
        const xhr = new XMLHttpRequest()
        xhr.open('GET', `http://127.0.0.1:8000/app1/get_data?gene=MYBPC3&data_name=${dataSelector3.value}`)
        xhr.addEventListener('loadend', () => {
//		console.log(JSON.parse(xhr.response))
            let data = JSON.parse(xhr.response)[0]
            let data2 = JSON.parse(xhr.response)[2]
            let layout = {
                legend: {
                    itemclick: false,// Disable default click behavior
                    itemdoubleclick: false
                },
            };
            Plotly.newPlot(plot_container, data, layout);
            Plotly.newPlot(plot_container1, data2, layout);

            plot_container.on("plotly_legendclick", function (event) {
                opacity_list = []
                seq_list = []
                for (i = 0; i < data.length; i++) {
                    opacity_list.push(data[i]['opacity'])
                    seq_list.push(i)
                }
                //所有图例都被点亮
                if (!opacity_list.includes(0.3)) {
                    const update = {opacity: 0.3}
                    res_list = seq_list.filter(item => item != event.curveNumber)
                    Plotly.restyle('plotly-chart', update, res_list);
                    console.log(data)
                } else {
                    if (data[event.curveNumber]['opacity'] === 1) {
                        const update = {opacity: 1}
                        Plotly.restyle('plotly-chart', update, seq_list);
                    } else if (data[event.curveNumber]['opacity'] === 0.3) {
                        var update = {opacity: 1}
                        Plotly.restyle('plotly-chart', update, [event.curveNumber]);

                        var update = {opacity: 0.3}
                        res_list = seq_list.filter(item => item != event.curveNumber)
                        Plotly.restyle('plotly-chart', update, res_list);
                    }
                }
            })


            dataSelector = document.querySelector('.choose_data')
            dataSelector1 = document.querySelector('.choose_data1')

            function updatedata() {
                if (dataSelector.value === 'cell_type') {
                    let data = JSON.parse(xhr.response)[0]
                    Plotly.newPlot(plot_container, data, layout);
                    plot_container.on("plotly_legendclick", function (event) {
                        opacity_list = []
                        seq_list = []
                        for (i = 0; i < data.length; i++) {
                            opacity_list.push(data[i]['opacity'])
                            seq_list.push(i)
                        }
                        //所有图例都被点亮
                        if (!opacity_list.includes(0.3)) {
                            const update = {opacity: 0.3}
                            res_list = seq_list.filter(item => item != event.curveNumber)
                            Plotly.restyle('plotly-chart', update, res_list);
                            console.log(data)
                        } else {
                            if (data[event.curveNumber]['opacity'] === 1) {
                                const update = {opacity: 1}
                                Plotly.restyle('plotly-chart', update, seq_list);
                            } else if (data[event.curveNumber]['opacity'] === 0.3) {
                                var update = {opacity: 1}
                                Plotly.restyle('plotly-chart', update, [event.curveNumber]);

                                var update = {opacity: 0.3}
                                res_list = seq_list.filter(item => item != event.curveNumber)
                                Plotly.restyle('plotly-chart', update, res_list);
                            }
                        }
                    })
                } else {
                    let data = JSON.parse(xhr.response)[1]
                    Plotly.newPlot(plot_container, data, layout);
                    plot_container.on("plotly_legendclick", function (event) {
                        opacity_list = []
                        seq_list = []
                        for (i = 0; i < data.length; i++) {
                            opacity_list.push(data[i]['opacity'])
                            seq_list.push(i)
                        }
                        //所有图例都被点亮
                        if (!opacity_list.includes(0.3)) {
                            const update = {opacity: 0.3}
                            res_list = seq_list.filter(item => item != event.curveNumber)
                            Plotly.restyle('plotly-chart', update, res_list);
                            console.log(data)
                        } else {
                            if (data[event.curveNumber]['opacity'] === 1) {
                                const update = {opacity: 1}
                                Plotly.restyle('plotly-chart', update, seq_list);
                            } else if (data[event.curveNumber]['opacity'] === 0.3) {
                                var update = {opacity: 1}
                                Plotly.restyle('plotly-chart', update, [event.curveNumber]);

                                var update = {opacity: 0.3}
                                res_list = seq_list.filter(item => item != event.curveNumber)
                                Plotly.restyle('plotly-chart', update, res_list);
                            }
                        }
                    })
                }

            }

            function updatedata1() {
                gene = dataSelector1.value
                const xhr1 = new XMLHttpRequest()
                xhr1.open('GET', `http://127.0.0.1:8000/app1/get_data?gene=${gene}&data_name=${dataSelector3.value}`)
                xhr1.addEventListener('loadend', () => {
                    let data3 = JSON.parse(xhr1.response)[2]
                    Plotly.newPlot(plot_container1, data3, layout);
                })
                xhr1.send()
            }

            dataSelector.addEventListener('change', updatedata, false);
            dataSelector1.addEventListener('change', updatedata1, false);
        });
        xhr.send()
    }
render_data()

dataSelector3.addEventListener('change', render_data, false);
</script>

</body>
</html>